<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .waterfall {
            width: 80%;
            margin: 0px auto;
            position: relative;
        }

        .waterfall img {
            width: 100px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="waterfall" id="w1">
        <img src="../imgs/01.jpg" alt="">
        <img src="../imgs/02.jpg" alt="">
        <img src="../imgs/03.jpg" alt="">
        <img src="../imgs/04.jpg" alt="">
        <img src="../imgs/05.jpg" alt="">
        <img src="../imgs/06.jpg" alt="">
        <img src="../imgs/07.jpg" alt="">
        <img src="../imgs/08.jpg" alt="">
        <img src="../imgs/09.jpg" alt="">
        <img src="../imgs/10.jpg" alt="">
        <img src="../imgs/11.jpg" alt="">
        <img src="../imgs/12.jpg" alt="">
        <img src="../imgs/13.jpg" alt="">
        <img src="../imgs/14.jpg" alt="">
        <img src="../imgs/15.jpg" alt="">
        <img src="../imgs/16.jpg" alt="">
        <img src="../imgs/17.jpg" alt="">
    </div>
    <script>
        window.onload = function () {
            class Waterfall {
                constructor(id, gap) {
                    this.box = document.querySelector(id)
                    this.imgs = this.box.querySelectorAll("img")
                    this.gap = gap
                    this.initial()
                }
                initial() {
                    this.iWidth = this.imgs[0].offsetWidth
                    this.hArr = []
                    this.cols = Math.floor((this.box.offsetWidth + this.gap) / (this.iWidth + this.gap))
                    for (var i = 0; i < this.cols; i++) {
                        this.imgs[i].style.left = i * (this.iWidth + this.gap) + "px"
                        this.hArr.push(this.imgs[i].offsetHeight + this.gap)
                    }
                    for (var i = this.cols; i < this.imgs.length; i++) {
                        var min = Math.min(...this.hArr)
                        var minIndex = this.hArr.indexOf(min)
                        this.imgs[i].style.left = minIndex * (this.iWidth + this.gap) + "px"
                        this.imgs[i].style.top = this.hArr[minIndex] + "px"
                        this.hArr[minIndex] += (this.imgs[i].offsetHeight + this.gap)
                    }
                    this.maxHeight = Math.max(...this.hArr)
                    var timer
                    window.onscroll = e => {
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                            if (this.maxHeight - this.gap >= scrollTop + window.innerHeight)
                                setTimeout(() => this.more(), 500)
                        }, 100)
                    }
                    this.getJson()
                }
                more() {
                    var imgs = this.getJson().imgs
                    imgs = imgs.map((src) => {
                        var img = document.createElement("img")
                        img.src = src
                        return img
                    })
                    for (var i = 0; i < imgs.length; i++) {
                        var min = Math.min(...this.hArr)
                        var minIndex = this.hArr.indexOf(min)
                        imgs[i].style.left = minIndex * (this.iWidth + this.gap) + "px"
                        imgs[i].style.top = this.hArr[minIndex] + "px"
                        this.box.appendChild(imgs[i])
                        this.hArr[minIndex] += (imgs[i].offsetHeight + this.gap)
                    }
                    this.maxHeight = Math.max(...this.hArr)
                }
                getJson() {
                    var json = {
                        imgs: []
                    }
                    for (var i = 1; i < this.imgs.length; i++) {
                        i >= 10 ? json.imgs.push(`../imgs/${i}.jpg`) : json.imgs.push(`../imgs/0${i}.jpg`)
                    }
                    return json

                }

            }
            var w1 = new Waterfall("#w1", 10)
        }

    </script>
</body>

</html>